<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="com.icss.th.subjects.pojo.Subject"%>
<%@ page import="com.icss.th.subjects.service.SubjectService"%>
<%@ page import="com.icss.th.common.Constants.SEARCH_TYPE"%>
<%
	String context = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<title>题海</title>
<meta charset="UTF-8">
<link href="<%=context%>/includes/css/style.css" rel="stylesheet" type="text/css">
<link href="<%=context%>/includes/css/jquery-ui.min.css" rel="stylesheet" type="text/css">
<style>
	#slider-range .ui-slider-range { background: rgb(255,140,60); }
</style>
</head>
<body>
<!--弹出窗口开始-->
		<%
			Subject root = SubjectService.getRoot();
			if (root != null)
			{
				List<Subject> list = root.getChildren();
				if (list  != null && !list.isEmpty())
				{
			%>
		<div id="tabs" style="display: none">
			<div id="tabs0" style="position: absolute;">
				<ul class="menu0" id="menu0">
				<%
					for (int i = 0; i < list.size(); i++)
					{
						Subject level1 = list.get(i);
				%>
					<li onClick="setSubjectTab(<%=i%>)" class="<%=i == 0? "hover" : ""%>">&nbsp;<%=level1.getName()%></li>
				<%} %>
				</ul>
			</div>
			<div class="main scrollbar" id="main0" style="position: absolute;">
				<%
					for (int i = 0; i < list.size(); i++)
					{
						Subject level1 = list.get(i);
						List<Subject> list2 = level1.getChildren();
						if (list2  != null && !list2.isEmpty())
						{
				%>
				<ul class="<%=i == 0? "block" : ""%>">
				<% 
					for (Subject level2 : list2)
					{
				%>
					<li><a href="#" id="<%=level2.getId()%>" onclick="setSubject(this)"><%=level2.getName()%></a></li>
				<%}%>
				</ul>
				<%}} %>
			</div>
		</div>
		<%
				}
			}
		%>

<!--弹出窗口结束-->

<div id=wrapper>
    <div id=content>
        <div id=u class="top-bg">
            <div id=user>
                <span style="float:left; padding-left:20px; padding-top:2px;"><img src="<%=context%>/includes/images/title.png" width="71" height="34"></span>
                <span style="float:left; padding-left:40px; padding-top:8px;"><a href="<%=context%>/"><img src="<%=context%>/includes/images/home.png" width="25" height="23"></a></span>
                <div id=userMenu>
                <a href="#">登录</a>&nbsp;<font color="#f68d00" size="2">|</font>&nbsp;
                <a href="#">快速入口</a>&nbsp;<font color="#f68d00">|</font>&nbsp;
                <a href="#">合作接口</a>
                </div>
            </div>
        </div>
    </div>
    <form>
	<div id=m style="margin-top:80px">
        <div style="padding-left:10px; margin-bottom:10px; height:40px;">
        <input type="hidden" name="subjectId" id="subjectId" value="118">
        <input type="hidden" id="subjectNameH" value="GRE">
            <ul>
                <li style="width:100px; font-size:16px; font-weight:bold; height:40px; line-height:40px; color:#666; float:left;">检索题库：</li>
                <li id="subjectName" style="font-size:20px;font-weight:bold; height:40px; line-height:40px; color:#666; float:left;">GRE</li>
                <li style="width:80px; text-align:center; font-size:12px; font-weight:bold; height:40px; line-height:40px; color:#666; float:left;"><a href="#" class="s_botton" onClick="choseSubject()">选择</a></li>
            </ul>
        </div>
        <div style="padding-left:10px; margin-bottom:5px; height:30px;">
            <ul>
                <li style="font-size:14px; font-weight:bold; height:30px; line-height:30px; color:#666; float:left;">使用以下条件进行题库检索</li>
            </ul>
        </div>
        
        <div style="padding-left:10px; margin-bottom:15px; height:40px;" id="select">
        	<input type="hidden" name="type" id="type" />
            <ul>
                <li style="font-size:14px;font-weight:bold;height:30px;line-height:30px;float:left;margin-right:0px;"><a id="type1" href="#" onclick="_changeColor(this)" class="<%=SEARCH_TYPE.QUESTION%>">检索题库</a></li>
                <li style="font-size:14px;font-weight:bold;height:30px;line-height:30px;float:left;margin-right:0px;"><a id="type2" href="#" onclick="_changeColor(this)" class="<%=SEARCH_TYPE.PAPER%>">检索试卷</a></li>
            </ul>
        </div>
        
      	<div style="padding-left:10px; margin-bottom:2px; height:30px;">
            <ul>
                <li class="input-bg1" >
                	<input type="text" id="keyword" maxlength="38" placeholder="输入试题题目" name="keyword" class="s_ipt1" x-webkit-speech />
                </li>
            </ul>    
        </div>
        
     	 <div style="padding-left:10px; margin-bottom:2px; margin-top:15px; height:30px;">
            <ul>
                <li style="font-size:14px; font-weight:bold; height:30px; line-height:30px; color:#666; float:left;">不包括以下任何字词</li>
            </ul>
        </div>
        
     	<div style="padding-left:10px; margin-bottom:2px; height:30px;">
			<ul>            
                <li class="input-bg1" >
                	<input type="text" id="unkeyword" maxlength="38" placeholder="不包含这些字词" name="unkeyword" class="s_ipt1" x-webkit-speech />
                </li>
                <li style="width:100px; position:absolute"></li>
        	</ul>
        </div>

        <div style="padding-left:10px; margin-bottom:10px; margin-top:20px; height:40px;">
        	<input type="hidden" id="sYear" name="sYear" />
        	<input type="hidden" id="eYear" name="eYear" />
            <span style=" float:left; font-size:14px; font-weight:bold; height:30px; line-height:30px; color:#666;">所属年份：</span>
        	<span id="startY" style="float:left;margin-top:7px"></span>
        	<div style="float:left;height:14px;margin-left:12px">
        		<div style="width:300px;margin-top:8px" id="slider-range"></div>
        	</div>
        	<span id="endY" style="float:right;margin-top:8px;margin-right:4px"></span>
        </div>

		<div style="padding-left:10px; margin-top:5px; height:30px;">
			<ul>            
                <li style="text-align:right">
                	<input type="button" value="搜　索" onclick="_search()" class="s_btn" onMouseDown="this.className='s_btn s_btn_h'" onMouseOut="this.className='s_btn'">
                </li>
                <li style="width:100px; position:absolute"></li>
        	</ul>
        </div>
	</div>
	</form>
    <div id=ftCon> 
            <P id=lh>
                <a href="#" onclick="AddFavorite()">加入收藏夹</a>
            </P>
            <p>
                <a href="#">关于我们</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                <a href="#">加入我们</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                <a href="#">支持与捐赠</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                <a href="#">开放接口</a>
            </P>
            <P id=cp>
                ©2013&nbsp;Tihai.org&nbsp;北京题海科技有限公司&nbsp;&nbsp;<a href="#" >使用必读</a>&nbsp;&nbsp;&nbsp;<a href="#" target="_blank">冀ICP备08007478号</a>&nbsp;
            </P>
      </div>
   </div>
<script src="<%=context%>/includes/js/jquery-1.10.0.min.js" type="text/javascript"></script>
<script src="<%=context%>/includes/js/jquery-ui.min.js" type="text/javascript"></script>
<script>
$("#keyword").keypress(function(event){
	if ( event.which == 13 ) {
		_search();
	}
});

$("#unkeyword").keypress(function(event){
	if ( event.which == 13 ) {
		_search();
	}
});

$(function() {
    $( "#slider-range" ).slider({
		range: true,
		min: 2000,
		max: 2013,
		values: [2000, 2013],
		slide: function( event, ui ) {
			$("#startY").html(ui.values[0]);
			$("#endY").html(ui.values[1]);
			$("#sYear").val(ui.values[0]);
			$("#eYear").val(ui.values[1]);
		}
    });
	
    if ($("#sYear").val()){
    	$("#slider-range").slider("values", 0, $("#sYear").val());
    }
    if ($("#eYear").val()){
    	$("#slider-range").slider("values", 1, $("#eYear").val());
    }
    
	$("#startY").html($("#slider-range").slider("values", 0));
	$("#endY").html($("#slider-range").slider("values", 1));
	$("#sYear").val($("#slider-range").slider("values", 0));
	$("#eYear").val($("#slider-range").slider("values", 1));
	
	if ($("#type").val()){
		_changeColor($("#type" + $("#type").val())[0]);
	}else{
		_changeColor($("#type1")[0]);
	}
	
	$("#subjectName").html($("#subjectNameH").val());
});

function _changeColor(link){
	$("#type").val(link.className);
	$("a", $(link).parent().parent()).css("background", "").css("color", "#005AA0");
	$(link).css("background", "#4598D2").css("color", "#fff");
}

function _search(){
	if ($.trim($("#keyword").val())){
		var path = '<%=context%>/adsearch?';
		path += 'subjectId=' + $("#subjectId").val();
		path += '&type=' + $("#type").val();
		path += '&keyword=' + encodeURI(encodeURI($("#keyword").val()));
		path += '&unkeyword=' + encodeURI(encodeURI($("#unkeyword").val()));
		path += '&sYear=' + $("#sYear").val();
		path += '&eYear=' + $("#eYear").val();
		location.href = path;
	}else{
		location.reload();
	}
}

//弹出试题科目选择框
function choseSubject(){
	$("#tabs").dialog({
		modal: true,
		height: 500,
		width: 700,
		resizable: false,
		draggable: false,
		title: '选择您需要的科目'
	});
}

//切换科目选择tab页
function setSubjectTab(n){
	$("li", $("#menu0")).each(function(i, o){
		o.className = i == n? "hover" : "";
	});
	
	$("ul", $("#main0")).each(function(i, o){
		o.style.display = i == n? "block" : "none";
	});
}

//选定一个科目
function setSubject(li, isSubmit){
	$("#subjectId").val(li.id);
	$("#subjectNameH").val(li.innerHTML);
	$("#subjectName").html(li.innerHTML);
	$("#tabs").dialog( "close" );
	
	if(isSubmit == 'isSubmit'){
		optionSubmit('subject', '');
	}
}

function AddFavorite(){
	var sURL = window.location;
	var sTitle = document.title;
    try{
        window.external.addFavorite(sURL, sTitle);
    }catch (e){
        try{
            window.sidebar.addPanel(sTitle, sURL, "");
        }catch (e){
            alert("加入收藏失败，请使用Ctrl+D进行添加");
        }
    }
}
</script>
</body>
</html>
